<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { withCtx } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { sendMsg } from './helper/miniBridge'

const router = useRouter()

const baseUrl = 'http://127.0.0.1:8080'
// const baseUrl = 'https://bdc69ccfac71.ngrok-free.app/'
const goMini = () => {
    wx.miniProgram.navigateTo({
      url: '/pages/logs/logs'
    });
  // }
}
const goUrl = () => {
  const params = {
    page: 'detail',
    id: 123,
    from: 'home'
  };
  wx.miniProgram.navigateTo({
    url: `/pages/webview/index?query=${encodeURIComponent(JSON.stringify(params))}&url=${encodeURIComponent(baseUrl+'/about')}`
  });
  // }

}
// postmessage只在返回、
const goPostMessage = () => {
  // console.log('window.WeixinJSBridge--->',window.WeixinJSBridge)
  // sendMsg({
  //   msg: 'H5 发来的实时数据'
  // })
  // window.postMessage({ type: 'FROM_H5', data: 'Hello 小程序' });
  if (typeof wx !== 'undefined' && wx.miniProgram) {
    wx.miniProgram.navigateBack({
      delta: 1,
    })
    wx.miniProgram.postMessage({
      data: {  // 注意：必须包裹在 data 字段下
        action: "changeUrl",
        url: `${baseUrl}/about`  // 或 ngrok HTTPS 地址
      }
    });
    console.log("消息已发送");
  }
}
const goH5 = () => {
  router.push({
    path: '/about',
  })
  // wx.miniProgram.navigateTo({url: `${baseUrl}/about`})
  // console.log('wx.miniProgram-->',wx.miniProgram)
}
</script>

<template>
  <header>

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <!-- <nav>
        <RouterLink to="/">Home</RouterLink> -->
        <div class="btn" @click="goMini">跳转到小程序log</div>
        <div class="btn" @click="goUrl">url跳转About</div>
        <div class="btn" @click="goPostMessage">postmessage跳转About</div>
        <div class="btn" @click="goH5">h5跳转About</div>
      <!-- </nav> -->
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
.btn{
  padding: 0.24rem 0.12rem;
  background: #1989fa;
  color: white;
  border-radius: 20px;
  text-align: center;
  margin-top: 10px;
  height:3rem;
  line-height: 2.5rem;
}

</style>
